<script>
    export let data; // let {data} = $props();
    export let changePath;
</script>

<div>
    {#each data as child}
        {#if child?.show}
        <sl-menu-item onclick={() => {
                        changePath(child.path);
                    }}>
            <span class="interval">
            <sl-icon name={child.icon} slot="prefix"/>
            {child.name}</span>
        </sl-menu-item>
        {/if}
    {/each}
</div>

<style>
    .interval {
        padding-left: 3rem;
    }
</style>